<template>
  <div class="image-viewer"></div>
  <!-- element的隐藏组件 实际上是el-image的放大组件 -->
  <el-image-viewer
    :initial-index="previewImgIndex"
    hide-on-click-modal
    :url-list="imageList"
    @close="closeImgViewer"
    v-if="previewImgIndex != null"
  >
  </el-image-viewer>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const props = defineProps({
  imageList: {
    type: Array,
  },
});
const previewImgIndex = ref(null);
const show = (index) => {
  // stopScroll();
  previewImgIndex.value = index;
};
defineExpose({ show });
const closeImgViewer=()=>{
  // startScroll();
    previewImgIndex.value = null;
}

// 如果最外层有滚动条就要在浏览图片的时候禁用
// const stopScroll = ()=>{
//   document.body.style.overflow = "hidden";
// }

// const startScroll = () =>{
//   document.body.style.overflow = "auto";
// }
</script>

<style lang="scss" scoped>
.image-viewer {
  .el-image-viewer__mask {
    opacity: 0.7;
  }
}
</style>